<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>❥LOVE_LiDan❥</title>
  </head>
  <body>
    <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
    <div id="root">
    </div>
    <script type="text/javascript">
        var extend = function extend(base) {
            for (var _len = arguments.length, extensions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                extensions[_key - 1] = arguments[_key];
            }

            return Object.assign.apply(Object, [{}, base].concat(extensions));
        };

        var parseColor = function parseColor(_ref) {
            var h = _ref.h,
                s = _ref.s,
                l = _ref.l,
                a = _ref.a;
            return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
        };

        var Color = extend.bind(null, { h: 0, s: 100, l: 100, a: 1 });

        var Vector = extend.bind(null, { x: 0, y: 0 });

        var Particle = extend.bind(null, {
            pos: Vector(),
            vel: Vector(),
            angle: 0,
            speed: 0,
            radius: 0,
            rotation: 0,
            color: Color()
        });

        var colors = [Color({ h: 20, s: 100, l: 50 }), Color({ h: 200, l: 50 }), Color({ h: 300, l: 50 }), Color({ h: 100, l: 40 })];

        var animationLoop = function animationLoop(scope) {

            if (scope.animation) {
                scope.animation(animationLoop.bind(null, scope));
            }

            var ctx = scope.ctx;
            var canvas = ctx.canvas;

            var rc = rough.canvas(canvas);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            scope.particles.map(function (p, i) {
                p.pos.y -= p.speed;
                if (i % 2) {
                    p.pos.x = p.pos.x + Math.sin(p.angle) * .2;
                } else {
                    p.pos.x = p.pos.x - Math.cos(p.angle) * .2;
                }
                p.angle += .01;
                rc.circle(p.pos.x, p.pos.y, p.radius, {
                    fill: parseColor(p.color),
                    roughness: Math.random() * 1.5,
                    hachureGap: p.hachureGap,
                    hachureAngle: p.hachureAngle
                });
                rc.line(p.pos.x, p.pos.y + p.radius * 1.2, p.pos.x, p.pos.y + p.radius / 2, {
                    bowing: Math.random() * 3
                });
                if (p.pos.y + p.radius * 3 < 0) {
                    p.pos.y = canvas.height + p.radius * 3;
                    p.pos.x = Math.random() * (canvas.width - p.radius);
                }
            });
        };

        var scope = {
            animation: requestAnimationFrame.bind(null),
            ctx: document.createElement('canvas').getContext('2d'),
            title: 'Brian Douglas',
            rotation: 0,
            particles: []
        };

        ~function (scope) {
            var canvas = scope.ctx.canvas;

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            document.body.appendChild(canvas);

            var particleCount = 50;
            while (particleCount--) {
                scope.particles.push(Particle({
                    pos: {
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height
                    },
                    speed: Math.random() + .2,
                    radius: Math.random() * 60 + 20,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    hachureAngle: Math.random() * 90,
                    hachureGap: Math.random() * 8 + 1
                }));
            }

            animationLoop(scope);
        }(scope);

        if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            window.addEventListener('resize', function () {
                scope.ctx.canvas.width = window.innerWidth;
                scope.ctx.canvas.height = window.innerHeight;
            });
        }
    </script>
    <script type="text/javascript" src="./js/wmgwdw.js"></script>
  </body>
</html>
